<template>
  <div>
    <van-nav-bar title="设置" left-text="返回" left-arrow></van-nav-bar>
    <!-- <van-nav-bar title="个人" :class="[Styleobj]" style="font-size:20px;color: white;"></van-nav-bar> -->
    <img class="back" src="../assets/img/logo.jpg" />
    <br />
    <div class="information">
      <van-cell-group>
        <van-cell>
          <van-field
            label="用户名"
            v-model="username"
            readonly
            right-icon="user-o"
            @click="tochange"
          ></van-field>
          <van-field
            label="电话"
            v-model="phone"
            readonly
            right-icon="phone-o"
          ></van-field>
          <van-field
            label="地址"
            v-model="address"
            readonly
            right-icon="location-o"
          ></van-field>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="app_container">
      <!-- 标签切换 -->
      <div class="tags_box">
        <h3>贵宾特权</h3>
        <div v-for="(item, index) in messageList" :key="item.id" class="tags">
          <div
            :class="{ isActive: index == active }"
            @click="handelToogel(index)"
          >
            {{ item }}
          </div>
        </div>
        <div class="con_box">
          <span v-show="active == 0">
            <van-image
              :src="require('../assets/img/周边/1.png')"
              style="width: 100%"
            />
          </span>
          <span v-show="active == 1">
            <van-image
              :src="require('../assets/img/周边/2.png')"
              style="width: 100%"
            />
          </span>
          <span v-show="active == 2">
            <van-image
              :src="require('../assets/img/周边/3.png')"
              style="width: 100%"
            />
          </span>
        </div>
        <!-- 内容部分 -->
      </div>
    </div>
  </div>
</template>

<script>
import storage from "../mydata/storage.js";
export default {
  data() {
    return {
      username: "",
      phone: "",
      address: "",
      messageList: ["周一", "周二", "周三"],
      active: 0,

      //         Styleobj:{
      //     backgroundcolor: 'backgroundcolor'
      //   }
    };
  },
  beforeMount() {
    var data = storage.get("userinfo");
    this.username = data.username;
    this.phone = data.phone;
    this.address = data.address;
  },
  props: {
    Styleobj: {
      type: String,
      default: "",
    },
  },
  methods: {
    tochange: function () {
      this.$router.push("/change");
    },
    xinxi: function () {
      this.$router.push("/ChangeInform");
    },
    handelToogel(index) {
      this.active = index;
    },
  },
};
</script>
<style scoped>
.con_box {
  margin: 20px auto;
}
.back {
  width: 100px;
  height: 100px;
  padding-top: 20px;
}
.tags {
  margin-left: 7px;
  font-size: 10px;
  float: left;
  width: 30%;
  background-color: rgb(241, 236, 229);
}

.information {
  width: 95%;
  margin: auto;
}
.van-nav-bar__title {
  color: #fff;
}
.van-nav-bar {
  background-color: rgb(51, 51, 51);
}
.van-icon-arrow-left:before {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff;
}
</style>
